<template>
  <div class="houseing-type-main">
    <div ref="box" class="box" style="height:200px">

    </div>

  </div>
</template>

<script>
import echarts from "echarts"
export default {
  data() {
    return {
      data: [
        {
          value: 1048,
          name: "自住"

        },
        {
          value: 735,
          name: "出租"

        },
        {
          value: 580,
          name: "空置"
        },
        {
          value: 484,
          name: "其他"
        }
      ]
    }
  },
  computed: {
    total() {
      let sum = 0
      this.data.map(res=>{
        sum = sum + res.value
      })
      return sum
    }
  },
  methods: {
    print() {
      let print = echarts.init(this.$refs.box)
      let self = this
      let option = {
        color: ["blue","green","yellow","red"], // 改变标题颜色 与线条颜色 统一
        legend: {
          top: "bottom",
          // show: false,
          orient: "vertical", // 标题默认水平 垂直
          left: "right", // 标题定位 居中 左 右
          // top: 50, // 定位 的 宽高
          textStyle: { // 字体的颜色
            color: "white"
          },
          formatter: function (name) {
            let obj = self.data.find(res=>{
              return res.name === name
            })
            let pre = self.percent(obj.value)
            return `${name}(${obj.value}间)${pre}`
          },
          data: [
            {name: "自住",icon: "circle"},
            {name: "出租",icon: "circle"},
            {name: "空置",icon: "circle"},
            {name: "其他",icon: "circle"}
          ] // 标题内容
        },
        title: [
          {
            text: "房屋性质类型",
            textStyle: {
              color: "yellow"
            }
          }
        ],
        emphasis: {
          label: {
            show: true,
            fontSize: "12",
            fontWeight: "bold",
            color: "yellow"
          }
        },
        toolbox: {
          show: false
        },
        tooltip: {
          // show: false,
          trigger: "item",
          textStyle: {
            fontSize: 12,
            color: "yellow"
          },
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name: "房屋类型",
            type: "pie",
            radius: [40, 50],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12",
                fontWeight: "bold",
                color: "white"
              }
            },
            label: {
              show: false,
              fontSize: 12,
              fontWeight: "bold",
              position: "center",
              formatter: "{d}%\n {b} "
            },
            data: this.data
          }
        ]
      }
      print.setOption(option)
    },
    percent(value) {
      let per = (value / this.total).toFixed(2)
      return (per * 100) + "%"
    }
  },
  mounted() {
    this.print()
  }
}
</script>

<style lang="scss">
$yellow:yellow;
  .houseing-type-main {
    display: flex;
    .box {
      // flex: 1;
      width: 80%;
      box-sizing: border-box;
      padding: 10px;
    }
    .botton_left {
      // flex: 1;
      display: flex;
      justify-content: center;
      position: relative;
      top: 40px;
      ul {
        margin: 0px;
        padding: 0px;
        height: 260px;
        li.one,li.two,li.three,li.four,li.five {
          list-style-type: disc;
          height: 30px;
          span {
          color: $yellow;
          }
        }
        li.one {
          color: red;
        }
        li.two {
          color: salmon;
        }
        li.three {
          color: yellow;
        }
        li.four {
          color: green;
        }
        li.five {
          color: blue;
        }
      }
    }
  }

</style>